<!--
 * @Author: liyin 2179253556@qq.com
 * @Date: 2023-03-20 13:51:35
 * @LastEditors: liyin 2179253556@qq.com
 * @LastEditTime: 2023-06-13 14:55:01
 * @FilePath: \questionnaire-system-admin\src\components\Common\BreadCrumb.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <!-- 面包屑 -->
  <el-breadcrumb :separator-icon="ArrowRight">
    <el-breadcrumb-item v-for="(item, index) in breadCrumbItemsList" :key="index" :to="{ path: item.path }">{{ item.title
    }}</el-breadcrumb-item>
  </el-breadcrumb>
</template>
<script setup lang="ts">
import { ArrowRight } from '@element-plus/icons-vue'
import { ref, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
const breadCrumbItemsList = ref<any>([])
const initBreadCrumb = (route: any) => {
  console.log(route)
  let breadCrumbItems: any = []
  route.matched.forEach((item: any) => {
    if (item.path !== '/home') {
      breadCrumbItems.push({
        title: item.meta.title,
        path: item.path
      })
    }
  })
  breadCrumbItemsList.value = breadCrumbItems
}
watch(
  () => route,
  (newValue, oldValue) => {
    initBreadCrumb(newValue)
  },
  { deep: true }
)
onMounted(() => {
  initBreadCrumb(route)
})
</script>
<style lang="scss" scoped>
.el-breadcrumb {
  // font-size: 16px;
}
</style>
